<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>绘制几何图形</title>
</head>
<script charset="utf-8"
		src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key={$tcconfig.tencentkey}"></script>
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 80%;
    }

    #toolControl {
        position: absolute;
        top: 10px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 168px;
        z-index: 1001;
    }
    .search {
        width: 400px;
        top: -23px;
        left: 50%;
        padding-bottom: 10px;
        float: left;
    }
</style>
<div>
	绘制：鼠标左键点击及移动即可绘制图形<br/>
	结束绘制：鼠标左键双击即可结束绘制多边形、多边形会自动闭合<br/>
	中断：绘制过程中按下esc键可中断该过程
</div>
<body onload="initMap()">

<div id="container"></div>
<div id="toolControl">
	<!--	<div class="toolItem active" id="marker" title="点标记"></div>-->
	<!--	<div class="toolItem" id="polyline" title="折线"></div>-->
	<!--	<div class="toolItem" id="polygon" title="多边形"></div>-->
	<!--	<div class="toolItem" id="circle" title="圆形"></div>-->
</div>
<div class="search">
	<div class="input-group">
		<input type="text" id="place" name="q" class="form-control" placeholder="输入地点"/>
		<span class="input-group-btn">
            <button type="submit" name="search" id="search-btn" class="btn btn-success">
                <i class="fa fa-search"></i>
            </button>
        </span>
	</div>
</div>
<!--<div class="confirm btn btn-info">完成</div>-->

<script type="text/javascript">
    let geometrys = []
    $('.confirm').click(function () {
        Fast.api.close(geometrys);
    })
    $('#search-btn').click(function () {
        var place = $('#place').val();
        if (!place) {
            alert('请出入查询地址');
            return;
        }
        //发送get请求
        $.getJSON(
            "tcfence/fence/get_location",
            {address: place},
            function (json) {
                var json = $.parseJSON(json);
                if (json.status == 0) {
                    destroy();//先清除
                    initMap(json.result.location.lat, json.result.location.lng)
                } else {
                    alert(json.message)
                }
                return
            }
        );

    })

    var map, editor, activeType = 'polygon';
    // 切换激活图层
    document.getElementById('toolControl').addEventListener('click', (e) => {
        let id = e.target.id;
        if (id !== 'toolControl') {
            document.getElementById(activeType).className = "toolItem";
            document.getElementById(id).className = "toolItem active";
            activeType = id;
            editor.setActiveOverlay(id);
        }
    });

    function initMap(lat = '{$tcconfig.lat}', lng = '{$tcconfig.lng}') {
        // 初始化地图
        map = new TMap.Map("container", {
            zoom: '{$tcconfig.zoom}', // 设置地图缩放级别
            center: new TMap.LatLng(lat, lng) // 设置地图中心点坐标
        });

        // 初始化几何图形及编辑器
        editor = new TMap.tools.GeometryEditor({
            map, // 编辑器绑定的地图对象
            overlayList: [ // 可编辑图层
                {
                    overlay: new TMap.MultiMarker({
                        map
                    }),
                    id: 'marker'
                },
                {
                    overlay: new TMap.MultiPolyline({
                        map
                    }),
                    id: 'polyline'
                },
                {
                    overlay: new TMap.MultiPolygon({
                        map
                    }),
                    id: 'polygon'
                },
                {
                    overlay: new TMap.MultiCircle({
                        map
                    }),
                    id: 'circle'
                }
            ],
            actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
            activeOverlayId: 'polygon', // 激活图层
            snappable: true // 开启吸附
        });

        // 监听绘制结束事件，获取绘制几何图形
        editor.on('draw_complete', (geometry) => {
            delete geometry.styleId;
            geometrys.push(geometry)
			/*只添加一条数据，直接关闭传参*/
            layer.msg('操作完成', function(){
                Fast.api.close(geometrys);
            });
            
        });
    }

    function destroy() {
        map.destroy();
    }
</script>


</body>

</html>